<template>
  <div v-if="isPlanningExisted">
    <!-- <el-tooltip
      v-if="verDiff > 2"
      :content="`${verDiff} 分钟前更新`"
      placement="top-start"
    >
      <el-button type="danger" size="small" link>
        <el-icon><CircleCloseFilled /></el-icon>
        <span>已过期</span>
      </el-button>
    </el-tooltip> -->
    <el-tooltip content="当前生效的扇区布局" placement="top-start">
      <el-button
        type="primary"
        size="small"
        :text="valueTarget != 'current'"
        @click="setValueTarget('current')"
      >
        <el-icon><Position /></el-icon>
        <span>当前</span>
      </el-button>
    </el-tooltip>
    <el-tooltip
      content="即将生效的扇区布局，点击显示详情"
      placement="top-start"
      v-if="isPlanningExisted"
    >
      <el-button
        type="danger"
        size="small"
        :text="valueTarget != 'planning'"
        @click="setValueTarget('planning')"
      >
        <el-icon :class="[valueTarget == 'current' ? 'blinking' : '']">
          <BellFilled />
        </el-icon>
        <span>即将生效</span>
      </el-button>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import dayjs from "dayjs";
import useSeatStore from "@/store/seat.js";
const seatStore = useSeatStore();
const isPlanningExisted = computed(() => seatStore.isPlanningExisted);
const valueTarget = computed(() => seatStore.valueTarget);
const setValueTarget = (target) => {
  seatStore.valueTarget = target;
  if ((target = "planning")) {
  }
};
const verDiff = computed(() =>
  dayjs().diff(seatStore.seatStatusVersion, "minute")
);
</script>

<style scoped>
@import "../styles/blinking.css";
</style>
